<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>墨兮 - 选项设置</title>
    <link rel="stylesheet" href="../static/css/options.css">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <style>
        body {
            background-image: url('../static/image/background.png');
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: '楷体', serif;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>墨兮&nbsp;-&nbsp;人格设定</h1>
    <div class="option">
        <label for="username">用户名：</label>
        <input type="text" id="username" value="" placeholder="请输入你的名字">
    </div>
    <div class="option">
        <label for="nickname">墨兮对你的称呼：</label>
        <input type="text" id="nickname" placeholder="你想让墨兮怎么称呼你呢？">
    </div>
    <div class="option">
        <label for="model">AI模型选择：</label>
        <select id="model">
            {% for i in models %}
                <option value="{{ i }}">{{ i }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="model-tip">
        <a href="../templates/options.html" target="_blank">不懂模型？点我查看</a>
    </div>
    <div class="option">
        <label for="personality">墨兮人格选择：</label>
        <select id="personality">
            <option value="聊天型：萝莉">聊天型：萝莉</option>
            <option value="聊天型：妹妹">聊天型：妹妹</option>
            <option value="专业型：程序员">专业型：程序员</option>
            <option value="专业型：翻译官">专业型：翻译官</option>
            <option value="自定义">自定义</option>
        </select>
    </div>
    <div class="option" id="customPersonality" style="display: none;">
        <label for="customDescription">自定义人格描述：</label>
        <textarea id="customDescription" placeholder="请输入你想要的墨兮人格描述"></textarea>
    </div>
    <button class="save-button" id="chatButton" onclick="goChat()">进入聊天</button>
    <script>
        async function goChat() {
            let button = document.getElementById("chatButton");
            button.disabled = true;
            let username = document.getElementById("username").value;
            let nickname = document.getElementById("nickname").value;
            let model = document.getElementById("model").value;
            let personality = document.getElementById("personality").value;

            let customDescription;

            if (personality === "自定义") {
                customDescription = document.getElementById("customDescription").value;
            } else {
                customDescription = "";
            }

            try {
                // 发送 POST 请求
                const response = await fetch('/loadConfig', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(
                        {
                            username: username,
                            nickname: nickname,
                            model: model,
                            personality: personality,
                            customDescription: customDescription
                        }
                    ),
                });

                const data = await response.json();
                if (data["status"] === 'ok') {
                    window.location.href = `/chat/${username}`;
                } else {
                    console.log(data["status"]);
                }
            } catch (error) {
                console.error("服务器数据获取错误：", error);
                alert("服务器数据获取错误，请稍后再试" + error);
                window.location.href = `/options`;
            }
        }
    </script>
</div>
<script>
    // 获取自定义人格选项和描述框的元素
    const personalitySelect = document.getElementById('personality');
    const customPersonalityDiv = document.getElementById('customPersonality');

    // 添加事件监听器，当选择框的值改变时触发
    personalitySelect.addEventListener('change', () => {
        // 如果选择了"自定义"，则显示描述框，否则隐藏
        if (personalitySelect.value === '自定义') {
            customPersonalityDiv.style.display = 'block';
        } else {
            customPersonalityDiv.style.display = 'none';
        }
    });
</script>
</body>
</html>